<script setup>
import { ref, reactive } from 'vue'

const activeName = ref('first')

const handleClick = (tab, event) => {
    console.log(tab, event)
}

const formInline = reactive({
    user: '',
    region: '',
})

const onSubmit = () => {
    console.log('submit!')
}

const handleCommand = (command) => {
    ElMessage(`click on item ${command}`)
}
let options = ref([]);
let tableData = ref([]);
</script>
<template>
    <el-card class="box-card">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="全部订单" name="first">
                <el-form :model="formInline" class="demo-form-inline">
                    <el-form-item label="订单状态">
                        <el-radio-group v-model="radio2">
                            <el-radio-button label="全部" />
                            <el-radio-button label="未支付" />
                            <el-radio-button label="未发货" />
                            <el-radio-button label="待收货" />
                            <el-radio-button label="待评论" />
                            <el-radio-button label="交易完成" />
                            <el-radio-button label="待核销" />
                            <el-radio-button label="已核销" />
                            <el-radio-button label="已退款" />
                            <el-radio-button label="已删除" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="支付方式">
                        <el-radio-group v-model="radio2">
                            <el-radio-button label="全部" />
                            <el-radio-button label="微信支付" />
                            <el-radio-button label="支付宝支付" />
                            <el-radio-button label="余额支付" />
                            <el-radio-button label="线下支付" />
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="创建时间">
                        <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="To"
                            start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts" :size="size" />
                    </el-form-item>
                    <el-form-item style="width: 30%;" label="商品搜索">
                        <el-input v-model="formInline.user" style="width: 80%;" placeholder="请输入商品名称/关键字/ID">
                        <template #prepend>
                            <el-select clearable v-model="select" placeholder="Select" style="width: 90px">
                                <el-option label="Restaurant" value="1" />
                                <el-option label="Order No." value="2" />
                                <el-option label="Tel" value="3" />
                            </el-select>
                        </template></el-input>
                        <el-button type="primary" @click="onSubmit">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">添加商品</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">商品采集</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-dropdown @command="handleCommand">
                            <el-button type="primary">
                                批量修改<el-icon class="el-icon--right"><arrow-down /></el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="a">Action 1</el-dropdown-item>
                                    <el-dropdown-item command="a">Action 2</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">批量下架</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">导出</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="selection" width="55" />
                    <el-table-column fixed prop="date" label="商品ID" />
                    <el-table-column prop="name" label="商品图" />
                    <el-table-column prop="state" label="商品名称" />
                    <el-table-column prop="city" label="商品类型" />
                    <el-table-column prop="address" label="商品售价" />
                    <el-table-column prop="zip" label="销量" />
                    <el-table-column prop="zip" label="库存" />
                    <el-table-column prop="zip" label="排序" />
                    <el-table-column prop="zip" label="状态" />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default>
                            <el-button link type="primary" size="small">查看</el-button>
                            <el-button link type="primary" size="small">编辑</el-button>
                            <el-button link type="primary" size="small">查看评论</el-button>
                            <el-button link type="primary" size="small">移动到回收站</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="普通订单" name="second">Config</el-tab-pane>
            <el-tab-pane label="拼团订单" name="third">Role</el-tab-pane>
            <el-tab-pane label="秒杀订单" name="fourth">Task</el-tab-pane>
            <el-tab-pane label="砍价订单" name="fifth">Task</el-tab-pane>
            <el-tab-pane label="预售订单" name="sixth">Task</el-tab-pane>
        </el-tabs>
    </el-card>
</template>

<style lang="less" scoped>
.select-color {
    background-color: black;
}
</style>